<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style> 
          .togglebutton {
            cursor: pointer;
            border: 1px solid #000;
            margin: 10px;
            padding: 10px;
            display: inline-block;
            background: -webkit-gradient(
                linear, left top, left bottom, from(#fff), to(#ccc));
          }
          .togglebutton.toggled {
            color: #fff;
            background: -webkit-gradient(
                linear, left top, left bottom, from(#333), to(#999));            
          }
        </style> 
    </head>
    <body onClick="closepop();">
        <p align="center">
            
            <button tabindex="0" id="submit" onClick="popup();" ><b><font size="100">#</font></b></button></p>
        
        <div  id="pop" style="position: absolute; margin: 0 auto; width: 100%; display: none; " >      
            <table width="100%" onmouseout="canClose=true;" onmouseover="canclose=false;"><tr><td align="center">
                <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="right" valign="bottom" background="west.png"><img src="c1.png"/></td>
                    <td align="center" valign="bottom" background="north.png"><img src="tip.png"/></td>
                    <td align="left" valign="bottom" background="east.png"><img src="c2.png"/></td>
                </tr>
                <tr>
                    <td align="right" background="west.png"></td>
                    <td align="center" background="bg.png">
                        <div id="tags_div">
                                <div id="tb"
                                 class="togglebutton"
                                     onclick="toggle('tb')">
                                        Toggle
                                </div>
                                <div id="tb2"
                                 class="togglebutton"
                                     onclick="toggle('tb2')">
                                        Toggle
                                </div>
                        </div>
                    </td>
                    <td align="left" background="east.png"></td>
                </tr>
                <tr>
                    <td align="right" valign="bottom"> <img src="c3.png"/> </td>
                    <td align="center" valign="bottom" background="south.png"></td>
                    <td align="left" valign="bottom" > <img src="c4.png"/> </td>
                </tr>
                </table></td></tr></table>
        </div>
        <br>
        <div id="result">Loading...</div>
        <script>
            var firstLoad=true;
            var tags=new Array();
            var res=new Array();
            var twt=new Array();
            function loadTagsAJAX()
            {
                   document.getElementById("result").innerHTML="Loading Tags...";
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if ( xmlhttp.readyState==4 &&xmlhttp.status==200) // && xmlhttp.readyState==4  &&xmlhttp.status==200
                {
                    var txt="";
                    tags=xmlhttp.responseText.split("\n");
                    tags.splice(tags.length-1,1);
                     for(i=0;i<tags.length;i++)
                         txt+='<div id="'+tags[i]+'" class="togglebutton" onclick="toggle(\''+tags[i]+'\')">'+tags[i]+'</div>';
                    document.getElementById("tags_div").innerHTML=txt;
document.getElementById("result").innerHTML="Done:Loading Tags...";
                }
              }
            xmlhttp.open("GET","_tags",true);
            xmlhttp.send();
            }
// /*
          function loadTag(tag)
            {
                
                   document.getElementById("result").innerHTML="Loading Tweets...";
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var tmp=xmlhttp.responseText.split("\n");
                    tmp.splice(tmp.length-1,1);
                      twt=new Array();
                      for(i=0;i<tmp.length/2;i++) res[i]=tmp[i*2];
                      for(i=0;i<tmp.length/2;i++) twt[i]=tmp[1+i*2];
                    draw();
                }
              }

                    var Found;
                    var i,j=0,k=0;
                    for(i=0;i<tags.length;i++)
                      if(document.getElementById(tags[i]).classList.contains('toggled')) {k++;}
                    if(k>1)
                    {
                       document.getElementById("result").innerHTML="Searching...";
                       for(i=0;i<twt.length;i++)
                       {
                          Found=true;
                          for(j=0;j<tags.length;j++)
                             if(document.getElementById(tags[j]).classList.contains('toggled'))
                                    Found=Found && (twt[i].toLowerCase().indexOf("#"+tags[j])>-1);
                          if(!Found)
                             {res.splice(i,1);twt.splice(i,1);}
                        }
                        draw();
                    }
                    else{
                         document.getElementById("result").innerHTML="sending request...";
                         xmlhttp.open("GET",tag,true);
                         xmlhttp.send();
                       }
            }
// */
         function draw()
{
  var txt="";
for(i=0;i<twt.length;i++)
  txt+=getFrame(twt[i])+"<br>";
document.getElementById("result").innerHTML=txt;
if(txt.length==0) document.getElementById("result").innerHTML="Not yet!";
}
         function getFrame(txt)
        {
            return '<table width="100%"><tr><td align="center"><table border="0" cellpadding="0" cellspacing="0"><tr><td align="right" valign="bottom" background="west.png"><img src="c1.png"/></td><td align="center" valign="bottom" background="north.png"></td><td align="left" valign="bottom" background="east.png"><img src="c2.png"/></td></tr><tr><td align="right" background="west.png"></td><td align="center" background="bg.png"><font color="white">'+txt+'</font></td><td align="left" background="east.png"></td></tr><tr><td align="right" valign="bottom"> <img src="c3.png"/></td><td align="center" valign="bottom" background="south.png"></td><td align="left" valign="bottom" > <img src="c4.png"/> </td></tr></table></td></tr></table>';
        }
                function toggle(id) {
                    canClose=false;
                  var b = document.getElementById(id);
                  if (b.classList.contains('toggled'))
                    b.classList.remove('toggled');
                   else
                    b.classList.add('toggled');
                loadTag(id);
                }
            
            
            
            var canClose=false;
            function closepop()
            {
                if(canClose)
                    popup();
//                canClose=false;
            }
            function popup()
            {
                var nn=document.getElementById("pop").style.display=="none";
                if(nn) canClose=false;
                document.getElementById("submit").innerHTML=nn ? '<b><font size="100">&#149;</font></b>':'<b><font size="100">#</font></b>';
                document.getElementById("pop").style.display= document.getElementById("pop").style.display=="none" ? "":"none";
            }
        loadTagsAJAX();
      //      search();
            
        </script>
    </body>
</html>